<template>
    <div class="center">
        <swiper class="swiper" :options="swiperOption">
            <swiper-slide v-for="item in $store.state.adv.focusList" :key="item.id"><img :src="'/zhai'+item.imgUrl"></swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import axios from "axios";
export default {
    name: "BannerSwiper",
    // 轮播图所需要的组件
    components: {
        Swiper,
        SwiperSlide
    },
    data() {
        return {
            swiperOption: {
                loop:true,
                // 显示的屏数
                slidesPerView: 1,
                // 间距
                spaceBetween: 30,
                // 若为真，那么活动块会居中，而非默认状态下的居左
                centeredSlides: true,
                // 设置自动播放
                autoplay: {
                    // 时间
                    delay: 2500,
                    // 当设置为false时，用户操作之后（swipes,arrow以及pagination 点击）autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay
                    disableOnInteraction: true
                },

                pagination: {
                    // 指定小圆点所在的元素
                    el: '.swiper-pagination',
                    // 是否点击小圆点可以进行切换
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            }
        }
    },
    mounted(){
        this.$store.dispatch("adv/getFocusListAsync");
    }
}
</script>

<style lang="less" scoped>
.center {
    box-sizing: border-box;
    width: 740px;
    height: 100%;
    padding: 5px;
    float: left;
    .swiper{
        img{
            width: 100%;
        }
    }
}
</style>